<template>
    <div id="workmate"
         style="height: calc(100% - 30px);width: calc(100% - 200px);background-color: #f7f7f7;position: absolute;left: 200px;top: 30px;border-top-left-radius: 8px;">

        <div style="position: relative; height: 100%; width: 100%; display: flex; padding: 10px 0px 0px 10px;">

            <div style="width: 260px;height: 100%;">
                <div
                        style="width: 250px;height: 100%;background-color: #ffffff;border-top-left-radius: 8px;border-top-right-radius: 8px;border: 1px solid #e1e1e1;">

                    <div class="padding-margin-traslate"
                         style="background-color: #41a1b7;border-top-left-radius: 8px;border-top-right-radius: 8px;">
                        <div style="font-size: 12px;text-align: center;line-height: 24px;padding: 8px;justify-content:center;display: flex;">
                            <i :style="{color:'#ffffff'}" class="iconfont icon-tongxuewangluo"></i><span
                                style="color: #ffffff;margin-left: 4px;">共{{userCount}}个同事</span>
                        </div>
                    </div>
                    <div style="margin-top: 1px;">
                        <ul class="group">
                            <template v-for="(group,index) of groups">
                                <li>
                                    <div @click="toggleGroup(group)" style="position: relative;">
                                        {{group.name}}
                                        <i v-if="group.open" class="fa fa-caret-down" aria-hidden="true" style="position: absolute;right: 15px;line-height: 34px;top: 0;color: #919c9e;"></i>
                                        <i v-else class="fa fa-caret-right" aria-hidden="true" style="position: absolute;right: 15px;line-height: 34px;top: 0;color: #919c9e;"></i>
                                    </div>
                                    <ul v-if="group.open">
                                        <template v-for="(child,j) of filterChildrens(group.children)">
                                            <li class="user" @click="onClickUser(child)" :class="conversation.userEntity != null && conversation.userEntity.id == child.id ?'active':''">
                                                <div>
                                                    <img :src="child.avatar" onerror="this.src='/imgs/default.png'" width="35px" height="35px"
                                                         style="border: 1px solid white;border-radius: 50%;"/>
                                                </div>
                                                <div style="margin-left: 8px;">
                                                    <div style="font-weight: bold;">{{child.nickName}}</div>
                                                </div>
                                                <div>
                                                    <!--<span v-if="user.count > 0 && conversationIndex != index" class="badge" style="background-color: #e96161; color: #ffffff;">{{user.count > 99 ?('99+'):user.count}}</span>-->
                                                </div>
                                            </li>
                                        </template>
                                    </ul>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="width: 100%;" v-if="conversation.userEntity != null">
                <router-view :conversation="conversation"></router-view>
            </div>
        </div>
    </div>
</template>

<script>

    import MateChat from './MateChat'
    export default {
        name: 'Workmate',
        components: {MateChat},
        data(){
            return {
                initId:this.$route.params.id,
                userCount: 0,
                userListHeight: 74,
                groups: [],
                conversation:{
                    supportUserEntity:this.user,
                    userEntity:null
                }
            }
        },
        computed: {
        },
        props:["user"],
        methods:{
            filterChildrens(childrens) {
                const that = this;
                if(childrens){
                    const _childrens = childrens.filter(function (children) {
                        if (that.initId && that.initId == children.id) {
                            that.conversation.userEntity = children;
                            that.initId = null;
                        }
                        return true;
                    });
                    return _childrens;
                }else{
                    return childrens;
                }
            },
            onClickUser(user){
                this.conversation.userEntity = user;
                this.$router.push('/workmate/'+user.id);
            },
            toggleGroup(group){
                const that = this;
                group.open = !group.open;
                that.$set(that.groups, that.groups.indexOf(group), group);
            }
        },
        mounted(){
            const that = this;
            $.post('/group/list', {}, function (result) {
                if (result instanceof Array) {
                    that.groups = result;
                    for (let index in that.groups) {
                        let group = that.groups[index];
                        group['open'] = true;
                        $.post('/group/user/list', {groupId: group.id}, function (result) {
                            if (result instanceof Array) {
                                group['children'] = result;
                                if(result.length > 0){
                                    that.userCount += result.length;
                                    that.$set(that.groups, index, group);
                                }
                            }
                        });
                    }
                }
            });
        }
    }
</script>
<style scoped>
    .group {
        padding: 0;
        list-style: none;
    }

    .group>li>div {
        background: #f7f7f7;
        font-size: 12px;
        border-bottom: 1px solid #f5eeee;
        border-top: 1px solid #f5eeee;
        padding: 8px;
        cursor: pointer;
    }

    .group:first-child div {
        border-top: none;
    }

    .group li > ul {
        list-style: none;
        padding: 0;
    }
    .group .user{
        display: flex;padding: 8px;
        border-top: 1px solid #f5eeee;
    }
    .group .user.active{
        background-color: #41a1b7;
        color: #fff;
        margin: 0 -1px;
    }
    .group .user:hover{
        background-color: #41a1b7;
        color: #fff;
        margin: 0 -1px;
    }
    .group .user:first-child{
        border-top: none;
    }
</style>

